<template>
	<view class="container">
		<view class="banner-container" @longtap="copyToken">
			<view class="header-scroll">
				<span>{{userName}}</span>，欢迎您进入{{barTitle}}大观直播
			</view>
		</view>
		<view class="title">今日课程</view>
		<div class="modify-pass-btn" :style="{background: `linear-gradient(90deg, ${theme.primary}, transparent)`}" @click="modifyPass">修改密码</div>
		<div class="log-out-btn" :style="{background: `linear-gradient(90deg, ${theme.primary}, transparent)`}" @click="reLogin">重新登陆</div>
		<mescroll-body  @init="mescrollInit" :down="downOption" :up="upOption">
			<view class="class-list">
				<view class="class-item" v-for="(item, index) in classList" :key="index">
					<view class="class-item-content">
						<!-- 普通教师 -->
						<view v-if="item.isMine">
							<view class="image-border">
								<view v-if="item.classStatus == 1 && !isPcClient" class="play-border" @tap.stop="goLive(item)">
									<view class="play-icon"></view>
									<view class="arrow"></view>
								</view>
								<image :src="item.coverImage" class="image" mode="widthFix"></image>
							</view>
							<view v-if="item.id" class="obs-area">
								<view class="obs-button" @click="copyObs(item, 0)">服务器</view>
								<view class="obs-button" @click="copyObs(item, 1)">串流密钥</view>
							</view>
							<view 
								v-if="item.onDateTime"
								class="class-item-status" 
								:style="{backgroundColor: classStatus(item.classStatus)}">
								{{ item.onDateTime }}
							</view>
						</view>
						<!-- 巡视员 -->
						<view v-else>
							<view class="image-border">
								<image :src="item.coverImage" class="image" mode="widthFix" @tap.stop="goLive(item)"></image>
							</view>
							<view 
								v-if="item.onDateTime"
								class="class-item-status" 
								:style="{backgroundColor: classStatus(item.classStatus)}">
								{{ item.onDateTime }}
							</view>
						</view>
						<!-- 普通课程 -->
						<view v-if="!item.isOpen" class="card-info">
							<view class="card-item">
								<view :style="{color: theme.primary}"><span>课程名称</span>: {{ item.courseName }}</view>
								<view v-if="item.lastUpdateDateTime" :style="{color: theme.primary}">{{ item.lastUpdateDateTime }}更新</view>
							</view>
							<view class="card-item">
								<view :style="{color: theme.primary}"><span>上课时间</span>: {{ item.dateTime || '-' }}</view>
							</view>
							<view class="card-item">
								<view :style="{color: theme.primary}">
									<span>任课老师</span>: {{ item.teacherName }}
								</view>
							</view>
							<view class="card-item">
								<view class="mark-area">
									<view v-if="item.classStatus == 1" class="card-button Interaction" :style="{background: `linear-gradient(155deg, ${theme.warning} 10%, ${theme.warningLight} 80%)`}"  @tap="goInteraction(item)">直播互动</view>
									<view v-else-if="item.classStatus == 3" class="card-button sing-info" :style="{background: `linear-gradient(155deg, ${theme.warning} 10%, ${theme.warningLight} 80%)`}" @tap="goSingInfo(item)">签到情况</view>
								</view>
								<view class="button-area">
									<view class="card-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goReview(item)">课程回放</view>
									<view class="card-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goDiscuss(item)">班级交流</view>
									<view class="card-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goOutLine(item)">预习区</view>
									<view class="card-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goHomeWork(item)">作业区</view>
								</view>
							</view>
						</view>
						<!-- 公开课 -->
						<view v-else class="card-info">
							<view class="card-item">
								<view :style="{color: theme.primary}"><span>课程名称</span>: {{ item.courseName }}</view>
								<view v-if="item.lastUpdateDateTime" :style="{color: theme.primary}">{{ item.lastUpdateDateTime }}更新</view>
							</view>
							<view class="card-item">
								<view :style="{color: theme.primary}"><span>上课时间</span>: {{ item.dateTime }}</view>
							</view>
							<view class="card-item">
								<view :style="{color: theme.primary}">
									<span>任课老师</span>: {{ item.teacherName }}
								</view>
							</view>
							<view class="card-bottom">
								<view>
									<view v-if="item.classStatus == 1" class="card-button Interaction" :style="{background: `linear-gradient(155deg, ${theme.warning} 10%, ${theme.warningLight} 80%)`}"  @tap="goInteraction(item)">直播互动</view>
									<view v-else-if="item.classStatus == 3" class="card-button sing-info" :style="{background: `linear-gradient(155deg, ${theme.warning} 10%, ${theme.warningLight} 80%)`}" @tap="goSingInfo(item)">签到情况</view>
								</view>
								<view class="card-button" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="goReview(item)">课程回放</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="fixed-mine" :style="{backgroundColor: theme.primary}" @tap="goMine">我的</view>
		<view class="fixed-search" :style="{backgroundColor: theme.primary}" @tap="showPop = true">搜索</view>
		<yxyl-pop :show="showPop" @maskClick="showPop = false">
			<view class="pop-content">
				<input v-model="searchVal" placeholder="请输入课程名或老师名" maxlength="50"/>
				<view class="card-button pop-btn" :style="{background: `linear-gradient(10deg, ${theme.primary} 30%, ${theme.primaryLight}, ${theme.primary} 70%)`}" @tap="search">搜索</view>
			</view>
		</yxyl-pop>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import routeUtil from '@/util/routeUtil.js';
import MescrollBody from 'mescroll-uni/mescroll-body.vue';
import MescrollMixin from "mescroll-uni/mescroll-mixins.js";
import yxylPop from '@/components/yxyl-pop/yxyl-pop.vue';
export default {
	mixins: [MescrollMixin],
	components: { MescrollBody, yxylPop },
	data() {
		return {
			theme: this.$theme,
			userName: '',
			classList: [],
			showPop: false,
			searchVal: '',
			// 是否允许触底加载
			allowAppend: true,
			downOption: {
				use: false, // 是否启用下拉刷新; 默认true,
				auto: false,
				native:false
			},
			//上拉加载的常用配置
			upOption: {
				use: false, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: false,
				textNoMore: '---没有了---'
			}
		};
	},
	onLoad() {
		this.userName = this.$store.state.user.user
		this.initCardList({
			SkipCount: 0,
			MaxResultCount: 20
		}).then(res => {
			this.classList = res;
		})
		this.checkUpdate()
	},
	//分享
	onShareAppMessage(e) {
		return {
		  title: '老年云课堂',
		  path: '/pages/index/index'
		}
	},
	//下拉刷新
	onPullDownRefresh(){
		this.initCardList({
			SkipCount: 0,
			MaxResultCount: 20
		}).then(res => {
			this.classList = res;
			uni.stopPullDownRefresh();
			this.allowAppend = true;
		}).catch(err=>{
			console.log('err: ', err);
			uni.stopPullDownRefresh();
		})
	},
	// 触底分页
	onReachBottom(){
		if(!this.allowAppend){
			return;
		}
		this.initCardList({
			SkipCount: this.classList.length,
			MaxResultCount: 20
		}).then(res => {
			this.classList = [...this.classList, ...res];
		})
	},
	computed:{
		barTitle(){
			return this.$store.state.common.name;
		},
		//获取服务器地址
		subLive:function(){
			return (val, len)=>{
				if(val){
					let index = val.lastIndexOf("/");
					val = val.substring(0, index) + '/';
					this.serveUrl = val;
					return val;
				}
				return ''
			}
		},
		//获取串流密钥
		subUrl:function(){
			return (val, len)=>{
				if(val){
					let index = val.lastIndexOf("/")
					val = val.substring(index + 1, val.length)
					this.keyUrl = val
					return val.length>len?`${val.substring(0, len)}...`:val
				}
				return ''
			}
		},
		classStatus:function(){
			return function(status){
				switch(status){
					case 1:
						return this.theme.danger
					case 2:
						return this.theme.warning
					case 3:
						return this.theme.info
				}
			}
		},
		// pc端判定
		isPcClient(){
			let distrub = uni.getSystemInfoSync().platform;
			console.log(distrub)
			return distrub == 'windows'
		}
	},
	methods: {
		...mapMutations('user', ['logout']),
		// 拷贝token
		copyToken(){
			uni.setClipboardData({
			    data:  `Bearer ${this.$store.state.user.token}`,
				success() {
					uni.hideToast()
				}
			})
		},
		// 搜索
		search(){
			this.initCardList({
				keyWord: this.searchVal
			}).then(resp=>{
				this.classList = resp;
				this.searchVal = '';
				this.showPop = false;
				this.allowAppend = false;
			})
		},
		// 更新检查
		checkUpdate(){
			const updateManager = uni.getUpdateManager();
			updateManager.onUpdateReady(function(res) {
				uni.showModal({
					title: '更新提示',
					content: '新版本已经准备好，是否重启应用？',
					success(res) {
						if (res.confirm) {
							// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
							updateManager.applyUpdate();
						}
					}
				})
			})
		},
		//我的
		goMine(){
			uni.navigateTo({
				url: `../meiPianList/meiPianList?hostId=${this.$store.state.user.teacherId}&essayType=2` 
			})
		},
		//初始化卡片数据
		initCardList(param){
			return this.$http.request({
				url: 'api/LivePush/GetTimeTable',
				data: param
			})			
		},
		//跳转互动页面
		goInteraction(data) {
			uni.navigateTo({
				url: `../interaction/interaction?Id=${data.id}`
			})
		},
		//跳转直播页面
		goLive(data) {
			// 如果是巡视员, 不予开启直播
			if(!data.isMine){
				return;
			}
			//直播中或者提前15分钟
			if (data.classStatus == 1 || data.classStatus == 2) {
				uni.showModal({
					content: "确定开始直播吗？",
					confirmText: '确定',
					cancelText: '取消',
					confirmColor: this.$theme.primary,
					success(e) {
						if(e.confirm){
							uni.navigateTo({
								url: '../live/live?Id=' + data.id
							})
						}
					}
				})
			}
		},
		//跳转作业区
		goHomeWork(data){
			uni.navigateTo({
				url: `../meiPianList/subList?mainId=${data.id}&courseName=${data.courseName}&classId=${data.classId}&dist=0`
			})
		},
		//跳转预习区页面
		goOutLine(data){
			uni.navigateTo({
				url: `../meiPianList/subList?essayType=1&courseName=${data.courseName}&classId=${data.classId}&timeTableId=${data.id}&dist=1`
			})
		},
		// 跳转往期签到
		goSingInfo(data){
			uni.navigateTo({
				url: `../meiPianList/subList?courseName=${data.courseName}&classId=${data.classId}&timeTableId=${data.id}&dist=2`
			})
		},
		//修改密码
		modifyPass(){
			uni.navigateTo({
				url: `../login/modifyPassword` 
			})
		},
		//拷贝Obs推流地址
		copyObs(e, dist){
			this.getLivePushInfo(e.id).then(resp=>{
				let url = resp.result.livePushUrl
				//0: 服务器地址
				if(dist == 0){
					url = this.subLive(url)
				}
				//1: 串流密钥
				else if(dist == 1){
					url = this.subUrl(url)
				}
				uni.setClipboardData({
				    data: url,
				    success: function () {
						uni.showToast({
							title: '已复制链接',
							duration: 2000
						});
				    }
				})
			})
		},
		//请求推流数据
		getLivePushInfo(id){
			return this.$http.request({
				url: 'api/LivePush/GetLivePushInfo',
				method: 'GET',
				allow:true,
				data:{
					Id:id
				}
			})
		},
		//课程回放
		goReview(e){
			uni.navigateTo({
				url: `../live/time_table_list?Id=${e.classId}&courseName=${e.courseName}`
			})
		},
		//班级交流
		goDiscuss(e){
			uni.navigateTo({
				url: '../discussGroup/discuss/discuss?discussGroupId=' + e.courseId + '&labelId=' + e.classId
			})
		},
		//重新登陆
		reLogin(){
			this.logout()
			uni.reLaunch({
				url: '/pages/login/login'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.container{
	position: relative;
	border-top: 1rpx solid #eee;
}

.banner-container:active{
	background-color: #eee;
}
.banner-container{
	width: 100vw;
	transition: background-color linear .3s;
	margin-bottom: 80rpx;
	overflow: hidden;
	@keyframes header-scroll{
		from{transform: translateX(100%)}
		to{transform: translateX(-100%)}
	}
	.header-scroll{
		width: 100%;
		padding: 10rpx;
		font-size: 28rpx;
		color: #4a4a4a;
		white-space: nowrap;
		overflow: hidden;
		animation: header-scroll 8s linear infinite;
	}
}

/* 搜索弹出层 */
.pop-content{
	padding: 20rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	font-size: 30rpx;
	.button-item{
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		color: #fff;
	}
}
/* 共通按钮同样式 */
.card-button{
	color: #fff;
	width: 180rpx;
	height: 50rpx;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	&.Interaction{
		position: relative;
		left: 20rpx;
	}
	&.sing-info{
		position: relative;
		left: 20rpx;
	}
	&.pop-btn{
		width: 200rpx;
		height: 60rpx;
		font-size: 30rpx;
		margin: 10rpx 0;
	}
}

.fixed-mine, .fixed-search{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 10rpx;
	font-size: 30rpx;
	z-index: 999;
}
.fixed-mine{
	top: 50rpx;
}
.fixed-search{
	top: 180rpx;
}
.title {
	display: flex;
	justify-content: center;
	padding: 10rpx 0;
	color: #808080;
}
.modify-pass-btn, .log-out-btn{
	position: absolute;
	top: 50rpx;
	left: 0;
	font-size: 28rpx;
	padding: 10rpx 100rpx 10rpx 10rpx;
	color: #fff;
}
.log-out-btn{
	top: 120rpx
}
.class-list {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;

	.class-item {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0;
		.class-item-content {
			position: relative;
			border: 1px solid #c8c7cc;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			.image-border{
				position: relative;
				.image {
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					width: 100%;
				}
				
				.play-border:active{
					opacity: 0.6;
				}
				.play-border{
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgb(0, 0, 0.1);
					opacity: 0.5;
					transition: opacity .3s;
					.play-icon{
						width: 100rpx;
						height: 80rpx;
						border-radius: 10rpx;
						background-color: #fff;
						position: relative;
						left: 30rpx;
						z-index: 999;
					}
					.arrow{
						width: 0;
						height: 0;
						border-top: 30rpx solid transparent;
						border-right: 40rpx solid #fff;
						border-bottom: 30rpx solid transparent;
						border-left: 40rpx solid transparent;
						position: relative;
						left: -20rpx;
						top: 5rpx;
						z-index: 999;
					}
					
				}
			}
			
			.card-info{
				padding: 10rpx 0;
				.card-bottom{
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 10rpx 0;
					.card-button{
						color: #fff;
						width: 180rpx;
						height: 50rpx;
						font-size: 30rpx;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
						&.Interaction{
							position: relative;
							left: 20rpx;
						}
						&.sing-info{
							position: relative;
							left: 20rpx;
						}
					}
				}
				.card-item{
					display: flex;
					justify-content: space-between;
					word-break: break-all;
					font-size: 26rpx;
					font-weight: bold;
					padding: 0 10rpx 10rpx 10rpx;
					.card-button{
						color: #fff;
						width: 180rpx;
						height: 50rpx;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 10rpx;
						&.Interaction{
							position: relative;
							left: 20rpx;
						}
						&.sing-info{
							position: relative;
							left: 20rpx;
						}
					}
					.button-area{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
						width: 390rpx;
					}
					.mark-area{
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
			.obs-area{
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				display: flex;
				justify-content: space-around;
				.obs-button{
					padding: 5rpx 10rpx;
					color: #fff;
					border: 1rpx solid #fff;
					border-radius: 5px;
					margin-left: 10rpx;
				}
			}
			.class-item-status {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				border-radius: 5px;
				color: #fff;
				padding: 5rpx 10rpx;
				z-index: 999;
				// &.play {
				// 	background: #bd1831;
				// }
				// &.will {
				// 	background: #f0ad4e;
				// }
				// &.offLine {
				// 	background: #999999;
				// }
			}
		}
	}
}
</style>
